<template>
    <div v-loading="isLoading">
        <div class="top">
            热门直播:
            <el-carousel :interval="4000" type="card" height="300px">
                <el-carousel-item v-for="item in liveTopList" :key="item.id">
                    <img @click="open(item.id)" class="carousel-img" v-if="item.liveImgUrl" :src="address.minioUrl+'image/'+item.liveImgUrl" >
                    <h3 v-else>暂无更多直播</h3>
                </el-carousel-item>
            </el-carousel>
        </div>
        <el-divider />
        全部直播：
        <div class="main" v-loading="buttonDisable">
            <div v-for="item in liveList?.items" :key="item.id" class="item" @click="open(item.presenterId)">
                <div><img :src="address.minioUrl+'image/'+item.liveImgUrl" class="img"></div>
                <div style="font-size: 20px;">{{item.title}}</div>
                <div style="color: rgb(103, 101, 101); font-size: 15px;">
                    <div style="float: left;">{{item.presenterName}}</div>
                    <div style="float: right;">❤：{{item.likeCount?item.likeCount:0}}</div>
                </div>
            </div>
        </div>

        <div class="pagination">
            <el-pagination layout="prev, pager, next" v-model:current-page="liveListParm.pageNo" :page-count="Number.parseInt(liveList?.page ?? '0')" @update:current-page="getLiveList()" />
        </div>
    </div>


    <el-dialog v-model="showLoginView" width="800" style="height: 500px;border-radius: 20px;background: linear-gradient(to bottom, #fbf0f2 10%, #ffffff);color: black;" center>
        <template #header>
            <h2 style="margin-top: 0px;">登录</h2>
        </template>
        <LoginView></LoginView> 
    </el-dialog>

</template>

<script setup lang="ts">
    import Page from '@/base/page';
    import request from '@/base/request';
    import LiveList from '@/types/live/LiveList';
    import LiveListParm from '@/types/live/LiveListParm';
    import { ElMessage } from 'element-plus';
    import {ref,onMounted} from 'vue'
    import { address } from '@/base/address';
    import checkLogin from '@/utils/checkLogin';
    const buttonDisable=ref(false)
    const liveTopList=ref<Array<LiveList>>()
    const liveList = ref<Page<LiveList>>()
    const isLoading=ref(false)
    const liveListParm=ref<LiveListParm>({
        pageNo:1,
        pageSize:3
    })
    const showLoginView=ref(false)

    const open=(id:number | undefined)=>{
        window.open('/liveing/'+id)
    }


    const getLiveList=async ()=>{
        buttonDisable.value=true;
        try{
            const response=(await request.post('/video/live/getLiveList',liveListParm.value)).data
            if(response.code===200){
                liveList.value=response.data
                liveTopList.value=liveList.value?.items?.slice(0,6) ?? [];
                while(liveTopList.value.length<6){
                    liveTopList.value.push({title:'1'})
                }
            }else{
                ElMessage.error('获取直播列表失败'+response.msg)
            }
        }finally{
            buttonDisable.value=false;
        }

    }

    onMounted(async()=>{
        isLoading.value=true
        try{
            const res=await checkLogin();
            if(res){
                getLiveList()
            }else{
                ElMessage.error('请先登录')
                showLoginView.value=true
            }
        }finally{
            isLoading.value=false
        }
    })
</script>

<style scoped>
    .pagination{
        text-align: center;
        margin-left: 70vh;
    }


    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

    .main{
        height: 260px;
        margin-top: 10px;
    }

    .img{
        width: 200px;
        height: 200px;
    }

    .item{
        width: 190px;
        cursor: pointer;
    }

    .carousel-img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 或者使用 object-fit: contain; 根据需要 */
    }
</style>